<template>
  <div class='column'>
    <!-- cpu使用率-->
    <div class='panel wrapper legendWraper'>
      <div class='inner'>
        <div class='title'>
          <span class="icon"></span>
          <h3>主机CPU使用率</h3>
        </div>
        <div class='chart'>
          <pie-chart
          :showTitle="showTitle"
          :title="cpu_title"
          :subText="subtext"
          :showLegend="showLegend"
          :isGroup="isGroup"
          :chartData="cpu_chartData"
          :otherOptions="cpu_option"
          :commonStyle="commonStyle"
          @pieClick="handleCpu"
          />
        </div>
        <!-- 图例 -->
      </div>
    </div>
    <!-- MEM使用率-->
    <div class='panel wrapper legendWraper'>
      <div class='inner'>
        <div class='title'>
          <span class="icon"></span>
          <h3>主机MEM使用率</h3>
        </div>
        <div class='chart'>
          <pie-chart
          :showTitle="showTitle"
          :title="mem_title"
          :subText="subtext"
          :isGroup="isGroup"
          :showLegend="showLegend"
          :chartData="mem_chartData"
          :otherOptions="mem_option"
          :commonStyle="commonStyle"
          @pieClick="handleMem"
          />
        </div>
        <!-- 图例 -->
      </div>
    </div>
    <!-- 接口平台运行-->
    <div class='panel wrapper'>
      <div class='inner'>
        <div class='title iosTitle'>
          <span class="icon"></span>
          <h3>IOS接口运行状态</h3>
          <span class="moreBtn" @click="handleIos">更多</span>
        </div>
        <div class="tableTitle">
          <span>接口单位</span>
          <span>接口地址</span>
          <span>发送状态</span>
          <span>标识</span>
        </div>
        <div class='table'>
          <vue-seamless-scroll :data="portInfoData" :class-option="classOption">
            <ul>
              <li v-for='(item, index) in portInfoData' :key='index'>
                <span :title="item.time">{{item.btos ? item.btos : '无'}}</span>
                <span :title="item.message">{{item.btsoIp}}</span>
                <span>{{item.status}}</span>
                <span>
                  <i :class="[item.status === '成功' ? 'green' : 'red']"></i>
                </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <cpu-dialog ref='cpuDialogRef' :commonStyle="commonStyle"></cpu-dialog>
    <!-- ios接口运行状态详情对话框 -->
    <ios-dialog ref="iosDialogRef"/>
    <!-- 设置 -->
    <setting-box ref='settingBox' />
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import CpuDialog from '../dialog/cpudialog.vue'
import IosDialog from '../dialog/iosDialog.vue'
import mixins from '../mixins'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [mixins],
  data () {
    return {
      themeColor: {
        textColor: '#538ec4'
      },
      drawer: false,
      showTitle: true,
      subtext: '平均使用率(%)',
      isGroup: true,
      showLegend: true,
      title: '80',
      cpu_title: '',
      cpu_chartData: [1800, 4500, 5790, 2000, 2000],
      cpu_option: {},
      commonStyle: {},
      mem_title: '',
      mem_chartData: [17, 23, 27, 33, 9],
      mem_option: {},
      pie_options: {
        title: {
          x: '34%',
          y: '42%',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#262626',
            fontSize: 10
          }
        },
        legend: {
          orient: 'vertical', // 垂直：vertical； 水平 horizontal
          right: '4%',
          itemWidth: 15,
          itemHeight: 10
        },
        series: [
          {
            center: ['35%', '56%'],
            radius: ['45%', '78%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#f19e9c', '#f8cd77', '#98d26f', '#a98cd1', '#6caded']
                  colorList = colorList.reverse()
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                    '{percent|' + params.percent.toFixed(0) + '%}'
                  )
                },
                padding: [-35, -35, -20, -35],
                rich: {
                  color: '#333',
                  percent: {
                    color: '#262626',
                    padding: [0, 5, 0, 0]
                  }
                }
              }
            },
            labelLine: {
              normal: {
                length: 12,
                length2: 40,
                lineStyle: {
                  width: 1
                }
              }
            }
          }
        ]
      },
      tableData: [],
      portInfoData: [
        {
          date: '05月07日11:40:31',
          btsoIp: '30.0.0.14',
          status: '1'
        },
        {
          date: '05月07日11:40:31',
          btsoIp: '30.0.0.14',
          status: '0'
        },
        {
          date: '05月07日11:40:31',
          btsoIp: '30.0.0.14',
          status: '1'
        },
        {
          date: '05月07日11:40:31',
          btsoIp: '30.0.0.14',
          status: '0'
        }
      ]
    }
  },
  components: {
    'PieChart': () => import('@/components/echarts/pie'),
    CpuDialog,
    IosDialog,
    SettingBox: () => import('../../../../components/setting'),
    vueSeamlessScroll
  },
  created () {
    if (this.themeName === 'light') {
      this.themeColor.textColor = '#fff'
    } else {
      this.themeColor.textColor = '#538ec4'
    }
    this.commonOption(1)
    this.commonOption(2)
  },
  mounted () {},
  computed: {
    themeName: {
      get () {
        return this.$store.state.theme.themeName
      }
    },
    classOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  watch: {
    themeName (val) {
      if (val === 'light') {
        this.themeColor.textColor = '#fff'
      } else {
        this.themeColor.textColor = '#538ec4'
      }
    }
  },
  methods: {
    openSeting () {
      this.$refs.settingBox.init(true)
    },
    // 处理真实数据
    initData () {
      if (JSON.stringify(this.chartData) !== '{}') {
        for (let item in this.chartData) {
          if (item === 'cpuEntities' || item === 'memoryEntities') {
            for (let item2 of this.chartData[item]) {
              item2.name = item2.regionStart + '%' + '~' + item2.regionEnd + '%'
              item2.value = parseInt(item2.hostNum)
            }
          }
        }
        this.cpu_chartData = this.chartData.cpuEntities ? this.chartData.cpuEntities : []
        this.mem_chartData = this.chartData.memoryEntities ? this.chartData.memoryEntities : []
        this.cpu_title = this.chartData.meanEntity.cpuMean ? (this.chartData.meanEntity.cpuMean).toString() : ''
        this.mem_title = this.chartData.meanEntity.memoryMean ? (this.chartData.meanEntity.memoryMean).toString() : ''
        // ios数据
        this.portInfoData = this.chartData.isoData
      }
    },
    // 处理公共参数
    commonOption (type) {
      if (type === 1) {
        this.cpu_option = {...this.pie_options}
      } else {
        this.mem_option = JSON.parse(JSON.stringify(this.pie_options))

        this.mem_option.series[0].itemStyle = {
          normal: {
            color: function (params) {
              let colorList = ['#f1bb4c', '#3bafff', '#3feed4', '#00d488', '#afa3f5', 'rgba(250,250,250,0.5)']
              return colorList[params.dataIndex]
            }
          }
        }
        this.mem_option.series[0].label = {
          normal: {
            formatter: params => {
              return (
                '{percent|' + params.percent.toFixed(0) + '%}'
              )
            },
            padding: [-35, -35, -20, -35],
            rich: {
              color: '#333',
              percent: {
                color: '#262626',
                padding: [0, 5, 0, 0]
              }
            }
          }
        }
        // 边框设置
        let secOption = {
          radius: ['83%', '70%'],
          center: ['35%', '56%'],
          type: 'pie',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          animation: false,
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              color: 'rgba(250,250,250,0.5)'
            }
          },
          data: [
            {
              value: 1
            }
          ]
        }
        this.mem_option.series.push(secOption)
      }
    },
    handleCpu (val) {
      this.$nextTick(() => {
        this.$refs.cpuDialogRef.init(val, 'cpu')
      })
    },
    handleMem (val) {
      this.$nextTick(() => {
        this.$refs.cpuDialogRef.init(val, 'mem')
      })
    },
    handleIos () {
      this.$refs.iosDialogRef.init()
    }
  }
}
</script>

<style lang='scss' scoped>
.dis{
  flex: 1;
  margin-left: 0.625rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}
.iosTitle{
  position: relative;
  .moreBtn{
    position: absolute;
    right: 10px;
    top: 6px;
    padding: 3px 10px;
    font-weight: bold;
    border-radius: 5px;
    border: 1px solid #fff;
    cursor: pointer;
    &:hover{
      background: rgba($color: #fff, $alpha: 0.2);
    }
  }
}
.tableTitle {
  display: flex;
  height: 25px;
  margin-top: 10px;
  padding: 0px 0.625rem;
  font-weight: bold;
  color: #666;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  span{
    display: inline-block;
    font-size: 0.75rem;
    &:nth-child(1){
      width: 35%;
    }
    &:nth-child(2){
      width: 30%;
    }
    &:nth-child(3){
      width: 20%;
    }
    &:nth-child(4){
      width: 10%;
    }
  }
}
.table {
  margin-top: 0.625rem;
  overflow: hidden;
  ul {
    li {
      display: flex;
      color: #262626;
      line-height: 1.45rem;
      padding: 0px 0.625rem;
      text-align: center;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      span {
        display: inline-block;
        font-size: 0.75rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:nth-child(1){
          width: 35%;
        }
        &:nth-child(2){
          width: 30%;
        }
        &:nth-child(3){
          width: 20%;
        }
        &:nth-child(4){
          width: 10%;
          i{
            display: inline-block;
            width: 12px;
            height: 12px;
            background: gray;
            border-radius: 50%;
            &.green{
              background:green;
            }
            &.red{
              background:red;
            }
          }
        }
      }
    }
  }
}
</style>
